<template>
    <div class="signBox">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-button icon="el-icon-back" circle
                    style="width: 30px; height: 30px;display: flex;justify-content: center;align-items: center;"
                    @click="goLogin()"></el-button>
                <span style="display: flex;align-items: center;margin: 0 10px;">账号注册</span>

            </div>
            <el-form :model="form" :rules="rules" ref="ruleForm">
                <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.name" autocomplete="off" placeholder="用户昵称"></el-input>
                </el-form-item>
                <el-form-item label="账号" :label-width="formLabelWidth" prop="user_account">
                    <el-input v-model="form.user_account" autocomplete="off" placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth" prop="user_password">
                    <el-input v-model="form.user_password" autocomplete="off" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth" prop="gender">
                    <el-select v-model="form.gender" placeholder="请选择性别" style="text-align: left;">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
                    <el-input v-model="form.age" autocomplete="off" placeholder="年龄"></el-input>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth" prop="user_phone">
                    <el-input v-model="form.user_phone" autocomplete="off" placeholder="电话"></el-input>
                </el-form-item>
                <el-form-item label="住址" :label-width="formLabelWidth" prop="user_site">
                    <el-input v-model="form.user_site" autocomplete="off" placeholder="住址"></el-input>
                </el-form-item>

                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import api from '@/api'
export default {
    data() {
        //  正则表达式
        var phoneRegex = (rule, value, callback) => {
            let phoneRegex = /^1[356789][0-9]{9}$/;
            if (phoneRegex.test(value)) {
                callback();
            } else {
                callback(new Error('请输入正确的电话号码'));

            }
        };
        var userNumberRegex = (rule, value, callback) => {
            let userNumberRegex = /^\d{8,12}$/;
            if (userNumberRegex.test(value)) {
                callback();
            } else {
                callback(new Error('请输入正确的账号'));

            }
        };
        var ageRegex = (rule, value, callback) => {
            // 18 - 24 
            let ageRegex = /^((1[0-9])|(2[0-9]))$/;
            if (ageRegex.test(value)) {
                callback();
            } else {
                callback(new Error('请输入正确的年龄'));

            }
        };
        return {
            form: {
                name: "",
                user_account: "",
                user_password: "",
                gender: "",
                age: "",
                user_phone: "",
                user_site: "",
            },
            formLabelWidth: '80px',
            rules: {
                user_account: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 8, max: 12, message: '长度是 8-12位字符', trigger: 'blur' },
                    { validator: userNumberRegex, trigger: 'blur' }
                ],
                user_password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 8, max: 12, message: '长度是 8-12位字符', trigger: 'blur' },
                ],
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                age: [
                    { required: true, message: '请输入年龄', trigger: 'blur' },
                    { min: 1, max: 3, message: '长度在 1 到 3 个字符', trigger: 'blur' },
                    { validator: ageRegex, trigger: 'blur' }
                ],
                user_phone: [
                    { required: true, message: '请输入电话号码', trigger: 'blur' },
                    { min: 11, max: 11, message: '长度是 11 字符', trigger: 'blur' },
                    { validator: phoneRegex, trigger: 'blur' }
                ],
                gender: [
                    { required: true, message: '请选择性别', trigger: 'blur' },
                ],
            }
        }
    },
    methods: {
        /**注册函数 */
        async sign() {
            let res = await api.addUsers({ ...this.form })
            if (res?.code == 200) {
                this.$message({
                    message: "注册成功",
                    type: 'success'
                });
                this.$router.push('/login')
            } else {
                this.$message.error(res.message);
            }
        },
        /**提交函数 */
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.sign();
                } else {
                    return false;
                }
            });
        },
        /**重置 */
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        goLogin() {
            this.$router.push('/login')
        }
    }
}


</script>

<style lang="scss" scoped>
.clearfix {
    display: flex;
    justify-content: flex-start;
}

.signBox {
    width: 100vw;
    height: 100vh;
    background-image: url("../../assets/loginback.png");
    background-size: cover;
}


.box-card {
    width: 500px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%)
}
</style>